<template>
<div>
  <ul class="form-box">
      <li>
        <div class="title">用户名：</div>
        <div class="content">
          <input type="text" placeholder="用户名" />
        </div>
      </li>
      <li>
        <div class="title">密码：</div>
        <div class="content">
          <input type="password" placeholder="密码"/>
        </div>
      </li>
    </ul>
</div>    
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

<style scoped>


/****************** 表单部分 ******************/
.form-box {
  width: 100%;
  margin-top: 12vw;
}

.form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}

.form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.form-box li .content {
  flex: 1;
}

.form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
</style>